<template>

    <!-- <div class="app-table"> -->
    <div class="app-body">
        <div class="app-search">
            <el-form :inline="true" class="demo-form-inline" v-model="form">
                <el-form-item label="" :label-width="formLabelWidth" prop="gradeId">
                    <el-select v-model="form.gradeId" autocomplete="off" @change="filterGradeId" clearable
                        style="width: 200px;" placeholder="请选择所在年级">
                        <el-option v-for="gradeId in gradeIds" :key="gradeId" :value="gradeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth" prop="classId">
                    <el-select v-model="form.classId" autocomplete="off" placeholder="请选择所在班级" clearable
                        style="width: 200px;" @change="reloadData">
                        <el-option v-for="item in classInfos" :key="item.classId" :value="item.classId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="姓名" v-model="form.studentName"><template #suffix style="width: 200px;">
                            <el-icon class="el-input__icon">
                                <Search />
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="学号" v-model="form.studentNumber"><template #suffix style="width: 200px;">
                            <el-icon class="el-input__icon">
                                <Search />
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="serach_btn" type="primary" @click="onSubmit"
                        @keyup.enter="searchEnter">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="list" header-row-class-name="table_header" size="large"
            :header-cell-style="{ background: '#F0F0F0', color: '#999999', height: '50px', }" style="color: #5B5A7E;">

            <el-table-column prop="paymentName" label="任务名称" width="300" style="white-space: nowrap;" />
            <el-table-column prop="payStatus" label="班级" min-width="120">
                <template #default="scope">
                    <p style="white-space: nowrap; margin: 0;">高{{ scope.row.gradeId }}级{{ scope.row.classId }}班</p>
                </template>
            </el-table-column>
            <el-table-column prop="studentName" label="学生姓名" style="white-space: nowrap;" min-width="100" />
            <el-table-column prop="studentNumber" label="学生学号" style="white-space: nowrap;" min-width="100" />
            <el-table-column prop="paymentAmountTotal" label="缴费金额" style="white-space: nowrap;" min-width="100" />
            <el-table-column prop="reducedPaymentAmountTotal" label="减免金额" style="white-space: nowrap;"
                min-width="100" />
            <el-table-column prop="payableAmountTotal" label="已缴费金额" style="white-space: nowrap;" min-width="120" />
            <el-table-column prop="unpaidAmountTotal" label="未缴费金额" style="white-space: nowrap;" min-width="120" />
            <el-table-column prop="payStatus" label="缴费状态" style="white-space: nowrap;" min-width="100">
                <template #default="scope">
                    <p style="color:#ff0000; margin: 0; padding: 0;" v-if="scope.row.payStatus == '01'">未交费</p>
                    <p style="color:#67C23A; margin: 0; padding: 0;" v-if="scope.row.payStatus == '03'">已缴费</p>
                </template>
            </el-table-column>

            <template v-slot:empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <div style="margin-top: 20px;float: right;">
            <el-config-provider :locale="locale">
                <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                    @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>
        </div>
    </div>
    <!-- <bottomView></bottomView> -->
    <!-- </div> -->
</template>
<script>

import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { getGradeIds } from "@/utils/dateFormat";
import { Picture as IconPicture, Upload, Location, ArrowDown, Search } from "@element-plus/icons-vue";
import { ArrowRight } from '@element-plus/icons-vue'
import { Loading } from "element-plus/es/components/loading/src/service";

import bottomView from "@/components/bottom.vue";

export default {
    name: "classTeacherList",
    data() {
        return {
            type: 0,
            title: "",
            page: 1,
            pages: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            payList: [],
            map: {},
            classInfos: [],
            gradeIds: getGradeIds(),
            departmentList: [],
            form: {
                studentName: "",
                studentNumber: "",
                classId: "",
                gradeId: "",
            },
            navData: [],
            navData1: [],
        };
    },
    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        bottomView,
        ElMessage, Upload, Location, ArrowDown, ArrowRight, Search
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getStudentPayList();
        this.getBaseClassInfoList();
        // this.getGradeIds();
    },
    computed: {

    },
    methods: {
        getBaseClassInfoList() {
            httpService("/javaApi/baseClassInfo/getAllEffectClass", {}, "get").then(
                (data) => {
                    this.map = data;
                }
            );
        },
        filterGradeId(val) {
            this.classInfos = this.map[val];
            this.reloadData()
        },
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.page = 1;
                this.getStudentPayList();
            }
        },

        reloadData() {
            this.page = 1;
            this.getStudentPayList()
        },

        onSubmit() {
            this.page = 1;
            this.getStudentPayList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getStudentPayList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getStudentPayList();
        },

        getStudentPayList() {
            this.form.classId == undefined ? this.form.classId = "" : this.form.classId = this.form.classId
            this.form.gradeId == undefined ? this.form.gradeId = "" : this.form.gradeId = this.form.gradeId
            httpService(
                "/javaApi/userPayment/listBack/" + this.page + "/" + this.pageSize,
                {
                    studentName: this.form.studentName,
                    studentNumber: this.form.studentNumber,
                    classId: this.form.classId,
                    gradeId: this.form.gradeId,
                },
                "get"
            ).then((data) => {
                // if (data.list) {
                //     data.list.map(item => item.createTime = item.createTime.slice(0, 10))
                // }
                // this.payList = data.list
                this.list = data.list
                this.total = data.total;
            });
        },
    },
};
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 5px 10px 10px;
    /* width: calc(100vw - 202px); */
}

.app-body {
    background: white;
    padding: 15px 0px 50px 0px;
    /* min-height: calc(100vh - 203px); */
    margin-bottom: 10px
}

#pay_top {
    width: 100%;
    height: 165px;
    background: url(../../assets/StudentPaymentTop.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    margin-bottom: 15px;
}


.top_title {
    padding: 50px 0 0 30px;
    font-size: 29px;
    color: #0065FF;
}

.top_btn_box {
    display: flex;
    margin: 0 0 0 30px;
    padding-top: 100px;
}

.top_btn_li {
    width: 154px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-color: brown;
    border-radius: 3px;
}

.top_btn_li img {
    margin-right: 10px;
}

.top_btn_li1 {
    background-color: #007EFF;
}

.top_btn_li2 {
    color: #FF7200;
    border: 1px solid #FF7200;
    background-color: #fff;
}

.top_btn_li3 {
    color: #15BA11;
    border: 1px solid #15BA11;
    background-color: #fff;
}

.table_header {
    border-radius: 5px 5px 0 0;
    color: #5B5A7E;
}

.navBox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    height: 20px;
}

.btn1 {
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.btn11 {
    color: #fff;
    background-color: #007EFF;
    border: none;
}

.btn12 {
    color: #fff;
    background-color: #FF7200;
    border: none;
}

.btn13 {
    color: #0065FF;
    background-color: transparent;
    border: 1px solid #0065FF;
}

.btn2 {
    color: #0065FF;
    font-size: 14px;
    background-color: transparent;
    border: none;
}

.shuxian {
    color: #8E8E8E;
    font-size: 12px;
}

.el-popconfirm__main {
    display: none !important;
}

.el-popconfirm__icon {
    display: none !important;
}

.moreBtn_box {
    width: 300px;
    display: flex;
    /* align-items: center; */
}

.moreBtn_box button {
    background-color: transparent;
    border: none;
    color: #333333;
}

.serach_btn {
    width: 80px;
    /* height: 35px; */
    border-radius: 3px;
    font-size: 14px;
}
</style>
